
<template>
  <div class="m-progress flex center" :style="`width:${width}%;`">
    <span>{{ title }}</span>
    <div class="m-progress-outer">
      <div class="m-progress-inner">
        <div
          class="u-progress-bg"
          :style="`width: ${progress}%;background:${bgColor}`"
        ></div>
      </div>
    </div>
    <!-- <span class="u-progress-text">{{ progress }}%</span> -->
  </div>
</template>
<script>
export default {
  name: "Progress",
  props: {
    title: {
      // 标题
      type: String,
      default: "",
    },
    bgColor: {
      // 标题
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default: 600,
    },
    progress: {
      type: Number,
      default: 36,
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.m-progress {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
//   line-height: 24px;
//   margin: 30px auto;
  span {
    color: white;
    font-size: 14px;
    margin-right: 10px;
  }
  .m-progress-outer {
    display: inline-block;
    width: calc(100% - 50px);
    .m-progress-inner {
      width: 100%;
      background-color: #19125A;
    //   border-radius: 100px;
      .u-progress-bg {
        // background-color: #1890ff;
        // border-radius: 100px;
        height: 18px;
        transition: all 0.3s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
      }
    }
  }
  .u-progress-text {
    margin-left: 10px;
    width: 50px;
    color: rgba(0, 0, 0, 0.45);
    text-align: left;
    vertical-align: middle;
  }
}
</style>